<template>
  <div id="getConstrate">
    <div class="warp">
      <!-- 筛选项区 start -->

      <!-- 筛选项区 start -->
      <div class="filterBox">
        <!-- 设置筛选条件 start -->
        <div
          class="viewFunnelBox"
          :style="{ padding: '5px 0' }"
          v-if="viewFunnelTypes.arr_setting.length > 0"
        >
          <!-- 【且】【或】切换 -->
          <div
            class="andOrNotBox"
            v-if="viewFunnelTypes.arr_setting.length >= 2"
            @click="switchRelation"
          >
            {{ relation.name }}
          </div>

          <!-- 线 -->
          <div
            class="lineBox"
            :style="{ height: getLineHeight() }"
            v-if="viewFunnelTypes.arr_setting.length >= 2"
          ></div>

          <div
            class="funnelSettingBox"
            v-for="(item, i) in viewFunnelTypes.arr_setting"
            :key="i"
          >
            <!-- 1. 主下拉菜单 -->
            <el-select
              size="mini"
              @change="settingChange(i)"
              placeholder="请选择"
              :title="viewFunnelTypes.arr_setting[i].cname"
              filterable
              value-key="name"
              v-model="viewFunnelTypes.arr_setting[i]"
            >
              <el-option
                v-for="cItem in viewFunnelTypes.commonOpts"
                :key="cItem.name"
                :value="cItem"
                :disabled="cItem.isDisabled"
                :style="{ 'max-width': '600px' }"
                :label="cItem.cname"
                :title="cItem.cname"
              ></el-option>
            </el-select>

            <!-- 2. 根据不同的 data_type 显示不同的下拉选项 -->
            <el-select
              size="mini"
              :style="{ width: '150px' }"
              @change="dataTypeChange(i)"
              v-if="
                viewFunnelTypes.arr_setting[i] &&
                  viewFunnelTypes.arr_setting[i].name
              "
              v-model="viewFunnelTypes.arr_setting[i]['new_data_type']"
              value-key="key"
            >
              <el-option
                v-for="cItem in getDataTypeOpts(i)"
                :key="cItem.key"
                :value="cItem"
                :label="cItem.name"
              ></el-option>
            </el-select>

            <!-- 3.1 可输入多个值（数字或字符串） -->
            <el-select
              v-if="showLeaf(i, 'createCommon')"
              size="mini"
              placeholder="输入内容后，按回车可添加多个"
              v-model="viewFunnelTypes.arr_setting[i]['customArr']"
              :style="{ width: '40%' }"
              multiple
              filterable
              allow-create
              default-first-option
              clearable
            >
              <el-option
                v-for="item in viewFunnelTypes.arr_setting[i]['customArrList']"
                :key="item"
                :value="item"
              ></el-option>
            </el-select>

            <!-- 3.2 可输入单个值 -->
            <el-input
              v-if="showLeaf(i, 'inputCommon')"
              size="mini"
              placeholder="请输入内容"
              v-model="viewFunnelTypes.arr_setting[i]['customStr']"
              :style="{ width: '40%' }"
              clearable
            ></el-input>

            <!-- 3.3 数字区间 -->
            <div class="betweenBox" v-if="showLeaf(i, 'numBetween')">
              <el-input
                size="mini"
                type="number"
                placeholder="请输入数字"
                v-model="viewFunnelTypes.arr_setting[i]['customNumBetween_0']"
                :style="{ width: '110px' }"
                clearable
              ></el-input>

              <span style="padding: 0 5px;">与</span>

              <el-input
                size="mini"
                type="number"
                placeholder="请输入数字"
                v-model="viewFunnelTypes.arr_setting[i]['customNumBetween_1']"
                :style="{ width: '110px' }"
                clearable
              ></el-input>

              <span style="padding: 0 5px;">之间</span>
            </div>

            <!-- 3.4 选择时间 start -->

            <!-- 3.4.1 日期区间 yyyy-mm-dd 00:00 至 yyyy-mm-dd 00:00 -->
            <el-date-picker
              v-if="showLeaf(i, 'autoDateBetween')"
              type="daterange"
              size="mini"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model="viewFunnelTypes.arr_setting[i]['customAutoDateBetween']"
            >
            </el-date-picker>

            <!-- 3.4.2 相对当前时间点，在 n 天 以内/以外 -->
            <div class="datetimeBox" v-if="showLeaf(i, 'relativeWithin')">
              <span class="size">在</span>

              <el-input
                size="mini"
                type="number"
                placeholder="请输入数字"
                v-model="viewFunnelTypes.arr_setting[i]['customNumDate']"
                :style="{ width: '100px', paddingRight: '5px' }"
                clearable
              ></el-input>

              <span class="size">天</span>

              <el-select
                size="mini"
                :style="{ width: '90px' }"
                v-model="viewFunnelTypes.arr_setting[i]['customRelative']"
                value-key="key"
              >
                <el-option
                  v-for="cItem in datetimeOpts[1].arr"
                  :key="cItem.key"
                  :value="cItem"
                  :label="cItem.name"
                ></el-option>
              </el-select>
            </div>

            <!-- 3.4.3 相对当前时间区间，在过去xx到过去xx之内 -->
            <div class="datetimeBox" v-if="showLeaf(i, 'dayBetween')">
              <span class="size">在过去</span>

              <el-input
                size="mini"
                type="number"
                placeholder="请输入数字"
                v-model="viewFunnelTypes.arr_setting[i]['customNumDate_0']"
                :style="{ width: '100px', paddingRight: '5px' }"
                clearable
              ></el-input>

              <span class="size">天到过去</span>

              <el-input
                size="mini"
                type="number"
                placeholder="请输入数字"
                v-model="viewFunnelTypes.arr_setting[i]['customNumDate_1']"
                :style="{ width: '100px', paddingRight: '5px' }"
                clearable
              ></el-input>

              <span class="size">天之内</span>
            </div>

            <!-- 3.4.4 相对当前事件发生时间 在【之前/后/当天/当周/当月】的【n】【天/时/分/秒】之内 -->
            <div class="datetimeBox" v-if="showLeaf(i, 'eventTime')">
              <span class="size">在</span>
              <el-select
                size="mini"
                :style="{ width: '110px' }"
                v-model="viewFunnelTypes.arr_setting[i]['customEventTime']"
                value-key="key"
              >
                <el-option
                  v-for="cItem in relativeEventTime"
                  :key="cItem.key"
                  :value="cItem"
                  :label="cItem.name"
                ></el-option>
              </el-select>

              <span>
                <span class="size">的</span>

                <el-input
                  size="mini"
                  type="number"
                  placeholder="请输入数字"
                  v-model="viewFunnelTypes.arr_setting[i]['customNumDate_2']"
                  :style="{ width: '100px', paddingRight: '5px' }"
                  clearable
                ></el-input>

                <el-select
                  size="mini"
                  :style="{ width: '70px' }"
                  v-model="viewFunnelTypes.arr_setting[i]['customTimeUnit']"
                  value-key="key"
                >
                  <el-option
                    v-for="cItem in timeUnit"
                    :key="cItem.key"
                    :value="cItem"
                    :label="cItem.name"
                  ></el-option>
                </el-select>

                <span>之内</span>
              </span>
            </div>
            <!-- 3.4 选择时间 end -->

            <!-- 移除筛选项 -->
            <i
              class="el-icon-delete"
              title="移除筛选项"
              @click="editCond(i)"
            ></i>
          </div>
        </div>
        <!-- 设置筛选条件 end -->
        <!-- 设置筛选条件 -->
        <div class="settingCondition">
          <el-button
            type="text"
            icon="el-icon-plus"
            size="small"
            @click="editCond()"
            >触发限制条件</el-button
          >
        </div>
      </div>
      <!-- 筛选项区 end -->
    </div>
    <!-- 筛选项区 end -->
  </div>
</template>

<script>
import {
  getFunnelList,
  //getPropertiesEvents,
  propertyList,
  valueList,
  funnelReportRes

} from "./api.config";

export default {
  name: "getConstrate",
  props: {
    meskey: Number
  },
  data() {
    return {
      value: "",
      options: [
        {
          value: "选项1",
          label: "等于"
        },
        {
          value: "选项2",
          label: "不等于"
        },
        {
          value: "选项3",
          label: "包含"
        },
        {
          value: "选项4",
          label: "不包含"
        },
        {
          value: "选项5",
          label: "有值"
        },
        {
          value: "选项6",
          label: "没值"
        },
        {
          value: "选项7",
          label: "为空"
        },
        {
          value: "选项8",
          label: "不为空"
        },
        {
          value: "选项9",
          label: "正则匹配"
        },
        {
          value: "选项10",
          label: "正则不匹配"
        }
      ],
      table: [{}],

      showEditFunnel: false, // 添加/编辑 漏斗弹窗
      editFunnelVal: null,

      /* 显示漏斗选项 */
      analysisOpts: {
        options: [],
        value: {}
      },

      /* 按xx查看漏斗 & 设置筛选条件 */
      viewFunnelTypes: {
        commonOpts: [],

        arr_check: [], // 按xx查看
        arr_setting: [] // 设置筛选条件
      },

      /* data_type 为 bool 时选，没有 3 级信息 */
      boolOpts: [
        { key: "isTrue", name: "为真" },
        { key: "isFalse", name: "为假" },

        { key: "isSet", name: "有值" },
        { key: "notSet", name: "无值" }
      ],

      /* data_type 为 string 时选 */
      textOpts: [
        { key: "equal", name: "等于" }, // 可输入多个字符串
        { key: "notEqual", name: "不等于" },

        { key: "contain", name: "包含" },
        { key: "notContain", name: "不包含" },

        { key: "isSet", name: "有值" },
        { key: "notSet", name: "无值" },
        { key: "isEmpty", name: "为空" },
        { key: "isNotEmpty", name: "不为空" },

        { key: "rlike", name: "正则匹配" },
        { key: "notrlike", name: "正则不匹配" }
      ],

      /* data_type 为 number 时选 */
      numberOpts: [
        { key: "equal", name: "等于" }, // 可输入多个数字
        { key: "notEqual", name: "不等于" },

        { key: "less", name: "小于" }, // 只需输入一个数字
        { key: "greater", name: "大于" },

        { key: "between", name: "区间" }, // 需输入 2 个数字，并且

        { key: "isSet", name: "有值" },
        { key: "notSet", name: "无值" }
      ],

      /* data_type 为 datetime 时选  */
      datetimeOpts: [
        { key: "absolute_between", name: "绝对时间" }, // 任意时间区间（精确到分，但是好像是写死 00:00）
        {
          key: "relative_within",
          name: "相对当前时间点",
          arr: [
            { key: "relative_within", name: "之内" },
            { key: "relative_before", name: "之前" }
          ]
        },
        { key: "relative_between", name: "相对当前时间区间" },
        { key: "relative_event_time", name: "相对事件发生时间" },

        { key: "isSet", name: "有值" },
        { key: "notSet", name: "无值" }
      ],

      /* data_type 为 list 时选 */
      listOpts: [
        { key: "contain", name: "包含" },
        { key: "notContain", name: "不包含" },

        { key: "isEmpty", name: "为空" },
        { key: "isNotEmpty", name: "不为空" },

        { key: "isSet", name: "有值" },
        { key: "notSet", name: "无值" }
      ],

      // 相对事件发生时间 选项
      relativeEventTime: [
        { key: "-", name: "(今天) 之后" },
        { key: "+", name: "(今天) 之前" },
        { key: "day", name: "今天" },
        { key: "week", name: "本周" },
        { key: "month", name: "本月" }
      ],

      // 时间单位
      timeUnit: [
        { key: "second", name: "秒" },
        { key: "minute", name: "分" },
        { key: "hour", name: "小时" },
        { key: "day", name: "天" }
      ],

      /* 视图类型 */
      state: "trends", // trends 趋势 | overview 对比

      /* 且 and | 或 or */
      relation: { key: "and", name: "且" },

      /* 趋势图表 */
      chartView: {},

      /* 步骤图表 */
      stepChart: {},

      /* 接口原始数据 */
      funnelReportResData: {}
    };
  },
  created() {
    this.getFunnels();
    // this.firstList();
    // this.thirdList();
  },

  mounted() {
    // this.$nextTick(() => {
    //   // 监听 window 窗口变化，自适应图表
    //   window.addEventListener("resize", this.autoChart);
    // });
  },
  methods: {
    /* edit 编辑 | add 添加 漏斗 */
    editFunnel(str) {
      if (str === "edit") {
        this.editFunnelVal = this.analysisOpts.value;
      }
      if (str === "add") {
        this.editFunnelVal = null;
      }

      this.showEditFunnel = true;

      setTimeout(() => {
        console.log("$refs = ", str, this.$refs.editFunnelRel);
      }, 500);
    },

    /* 返回 编辑/添加 漏斗弹窗 title */
    getDrawerTitle() {
      if (!this.editFunnelVal) {
        return "创建漏斗";
      }
      return "编辑漏斗";
    },

    /* 监听【显示漏斗】下拉菜单值的改变 */
    analysisChange() {
      console.log("显示漏斗 = ", this.analysisOpts.value);
    },

    /* 监听【按xx查看】下拉选项值的改变 */
    funnelChange() {
      console.log("按 xx 查看 = ", this.viewFunnelTypes.arr_check);
    },

    /* 监听 3.1 筛选条件项 */
    settingChange(i) {
      console.log("监听主筛选项 = ", i, this.viewFunnelTypes.arr_setting);
      this.initCustomVal(i);
      this.initDisabled();
    },

    /* 监听 3.2 下拉筛选 */
    dataTypeChange(i) {
      let t = this;
      let obj = t.viewFunnelTypes.arr_setting[i];
      console.log("监听二级筛选项 = ", i, obj);

      this.initCustomVal(i);
    },

    /* 视图类型切换 */
    stateChange() {
      if (this.state === "trends") {
        this.viewChart();
      }
    },

    /* 初始化自定义字段（三级项）的值 */
    initCustomVal(ind) {
      let t = this;

      setTimeout(() => {
        let arr_setting = t.viewFunnelTypes.arr_setting;
        let _ind = typeof ind === "number" ? ind : arr_setting.length - 1;

        if (
          arr_setting[_ind]["customArr"] &&
          arr_setting[_ind]["customArr"].length > 0
        ) {
          t.viewFunnelTypes.arr_setting[_ind]["customArr"] = [];
        }

        if (arr_setting[_ind]["customStr"]) {
          t.viewFunnelTypes.arr_setting[_ind]["customStr"] = "";
        }

        if (
          arr_setting[_ind]["customNumBetween_0"] ||
          arr_setting[_ind]["customNumBetween_1"]
        ) {
          t.viewFunnelTypes.arr_setting[_ind]["customNumBetween_0"] = "";
          t.viewFunnelTypes.arr_setting[_ind]["customNumBetween_1"] = "";
        }
      });
    },

    /* 渲染图表 */
    viewChart() {
      let t = this;

      let dom = document.getElementById("chart");
      t.chartView = t.$echarts.init(dom);

      // 图表模板
      let tem = {
        xAxis: {
          type: "category",
          axisLabel: { interval: 0, rotate: -40 },
          data: []
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: []
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} %"
          }
        },
        series: []
      };

      let funnelReportResData = t.funnelReportResData;
      let dateList = funnelReportResData.dateList;
      let funnelDetail = funnelReportResData.funnelDetail;
      let eventNames = funnelReportResData.eventNames;

      // 图表横坐标，因为 dateList 第 0 个是 '$ALL'，所以从第 1 个开始
      for (let i = 1; i < dateList.length; i++) {
        tem.xAxis.data.push(dateList[i]);
      }

      // 步骤
      for (let i = 0; i < eventNames.length; i++) {
        let size = i === 0 ? "总体转化" : "第 " + i + " 步转化";
        tem.legend.data.push(size);
        tem.series.push({
          name: size,
          type: "line",
          data: [],

          // 参考线/辅助线
          markLine: { data: [{ type: "average", name: "平均值" }] }
        });
      }

      // 坐标值
      for (let i = 1; i < dateList.length; i++) {
        let item = funnelDetail[i];

        for (let j = 0; j < item.steps.length; j++) {
          let cItem = item.steps[j];
          if (j === 0) {
            tem.series[j].data.push(item.completionRate);
          } else {
            tem.series[j].data.push(cItem.conversionRate);
          }
        }
      }

      t.chartView.setOption(tem);
      t.autoChart();
    },

    /* 图表大小自适应 */
    autoChart() {
      if (this.state === "trends") {
        this.chartView && this.chartView.resize();
      }
    },

    /* 判断显示哪个三级选项 */
    showLeaf(i, str) {
      let obj = this.viewFunnelTypes.arr_setting[i];
      let dataType = obj["dataType"]; // 一级 type
      let newDataType = obj["new_data_type"]; // 二级 type

      // 如果没有选择一级或二级，那么就隐藏三级
      if (!dataType || !newDataType || !newDataType.key) {
        return false;
      }

      console.log("判断显示哪个三级选项 = ", str, obj);
      // 显示条件
      let arrMap = {
        // 可输入多个值
        createCommon: {
          dataTypeArr: ["number", "string"],
          newDataTypeArr: ["equal", "notEqual"] // equal 等于 | notEqual 不等于
        },

        // 可输入单个值
        inputCommon: {
          dataTypeArr: ["number", "string"],

          // less 小于 | greater 大于 | contain 包含 | notContain 不包含 | rlike 正则匹配 | notrlike 正则不匹配
          newDataTypeArr: [
            "less",
            "greater",
            "contain",
            "notContain",
            "rlike",
            "notrlike"
          ]
        },

        // 数值区间
        numBetween: {
          dataTypeArr: ["number"],
          newDataTypeArr: ["between"] // between 区间
        },

        // 时间区间 默认
        autoDateBetween: {
          dataTypeArr: ["datetime"],
          newDataTypeArr: ["absolute_between"] // absolute_between 绝对时间
        },

        // 相对当前时间点时
        relativeWithin: {
          dataTypeArr: ["datetime"],
          newDataTypeArr: ["relative_within"] // relative_within 相对当前时间点
        },

        // 相对当前时间区间
        dayBetween: {
          dataTypeArr: ["datetime"],
          newDataTypeArr: ["relative_between"] // relative_within 相对当前时间区间
        },

        // 相对事件发生时间
        eventTime: {
          dataTypeArr: ["datetime"],
          newDataTypeArr: ["relative_event_time"] // relative_event_time 相对时间发生时间
        }
      };

      // 可自定义多个值，敲回车进行添加值 的组件
      if (arrMap[str]) {
        return (
          arrMap[str].dataTypeArr.indexOf(dataType) >= 0 &&
          arrMap[str].newDataTypeArr.indexOf(newDataType.key) >= 0
        );
      }

      return false;
    },

    /* 筛选项不可选设置 */
    initDisabled() {
      let arrSetting = this.viewFunnelTypes.arr_setting;
      let commonOpts = this.viewFunnelTypes.commonOpts;

      for (let i = 0; i < commonOpts.length; i++) {
        let item = commonOpts[i];
        this.viewFunnelTypes.commonOpts[i]["isDisabled"] = false;

        for (let j = 0; j < arrSetting.length; j++) {
          let cItem = arrSetting[j];

          if (this.viewFunnelTypes.commonOpts[i]["isDisabled"]) {
            continue;
          }
          if (item.name === cItem.name) {
            this.viewFunnelTypes.commonOpts[i]["isDisabled"] = true;
          }
        }
      }
    },

    /* 切换【且】【或】 */
    switchRelation() {
      let key = this.relation.key;
      this.relation =
        key === "and" ? { key: "or", name: "或" } : { key: "and", name: "且" };
    },

    /* 添加 add/移除 remove 筛选条件 */
    editCond(i) {
      // 移除筛选条件
      if (typeof i === "number") {
        this.viewFunnelTypes.arr_setting.splice(i, 1);
        this.initDisabled();
        return;
      }

      // 添加筛选项
      this.viewFunnelTypes.arr_setting.push({});
      this.initCustomVal();
      // 默认【且】
      if (this.viewFunnelTypes.arr_setting.length === 2) {
        this.relation = { key: "and", name: "且" };
      }
    },

    /* 根据父级 data type 返回子级下拉选项 */
    getDataTypeOpts(i) {
      let arr_setting = this.viewFunnelTypes.arr_setting;
      let dataType = arr_setting[i].dataType;
      let that = this;
      console.log("dataType===" + dataType);
      valueList({
        event: "event._Anything." + arr_setting[i].name
      }).then(res => {
        // 返回状态码如果不是 200，说明数据异常，需弹窗提示
        if (res.data.code !== 200) {
          this.$alert(res.data.msg, '提示', { type: 'warning'});
          return;
        }

        // this.attList = res.data.rows
        if (dataType == "string") {
          if (res.data.data.rows != null) {
            that.viewFunnelTypes.arr_setting[i].customArrList =
              res.data.data.rows;
          }
        }
      });

      let objKey = {
        string: "textOpts",
        number: "numberOpts",
        bool: "boolOpts",
        datetime: "datetimeOpts",
        list: "listOpts"
      };

      if (objKey[dataType]) {
        return this[objKey[dataType]];
      }

      return [];
    },

    /* 返回计算线条高度 */
    getLineHeight() {
      let len = this.viewFunnelTypes.arr_setting.length;

      if (len < 2) {
        return 0;
      }
      if (len === 2) {
        return "38px";
      }
      return (len - 2) * 38 + 38 + "px";
    },

    /* 查询漏斗内容 */
    searchFunnel() {
      let t = this;
      let appid=this.$store.state.global.appItem.appId;
      let param = {
        id: 100002,
      };
      console.log(appid,99)
      funnelReportRes(param,appid)
        .then(res => {
          // 返回状态码如果不是 200，说明数据异常，需弹窗提示
          if (res.data.code !== 200) {
            this.$alert(res.data.msg, '提示', { type: 'warning'});
            return;
          }

          t.funnelReportResData = res.data;
          setTimeout(() => {
            t.viewChart();
          });
        })
        .catch(error => {
          console.log("error = ", error);
        });
    },

    /* 获取【漏斗】下拉菜单列表 */
    getFunnels() {
      let t = this;
      let param = { limit: 1000 };

      getFunnelList(param)
        .then(res => {
          // 返回状态码如果不是 200，说明数据异常，需弹窗提示
          if (res.data.code !== 200) {
            this.$alert(res.data.msg, '提示', { type: 'warning'});
            return;
          }

          t.analysisOpts.options = res.data.data.rows;
          t.analysisOpts.value = t.analysisOpts.options[0];

          this.getFunnelCondition();
        })
        .catch(error => {
          console.log("error = ", error);
        });
    },

    /* 获取【按 xx 条件查看】下拉菜单选项 */
    getFunnelCondition() {
      let t = this;
      let param = {
        events: "$AppStart, Search",
        type: "event",
        needEventTime: true
      };

      propertyList(param)
        .then(res => {
          // 返回状态码如果不是 200，说明数据异常，需弹窗提示
          if (res.data.code !== 200) {
            this.$alert(res.data.msg, '提示', { type: 'warning'});
            return;
          }

          t.viewFunnelTypes.commonOpts = res.data.data.rows;
          // TODO
          this.searchFunnel();
        })
        .catch(error => {
          console.log("error = ", error);
        });
    },

    // 第一个下拉框
    firstList(){
      propertyList().then(res => {
        // debugger
        console.log(res.data.data.rows,77);

        // 返回状态码如果不是 200，说明数据异常，需弹窗提示
        if (res.data.code !== 200) {
          this.$alert(res.data.msg, '提示', { type: 'warning'});
          return;
        }
      })
    },

    thirdList(){
      valueList({event:'',limit:'',fuzzyStr:''}).then(res => {
        // debugger
        console.log(res.data.data.rows)
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.funnelAnalysis {
}

.headerBox .title {
  font-size: 18px;
  font-weight: bold;
}

.filterBox,
.contentBox {
  width: 100%;
  background: #f6f8fa;
  border-radius: 5px;
}

.warp {
  display: flex;
}
/* 筛选项区 */
.filterBox {
  .viewFunnelBox {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px solid #e7e7e7;
    position: relative;

    button {
      height: 27px;
    }

    .title-size {
      display: inline-block;
      width: 80px;
      padding: 0 10px;
      text-align: right;
    }

    .el-select {
      margin-right: 10px;
    }
  }

  .funnelSettingBox {
    border-left: 2px solid #6fd3b3;
    padding: 5px 0 5px 97px;
    position: relative;

    &:hover {
      background-color: #fafafa;
    }

    input[type="number"] {
      padding-right: 0;
    }

    .el-select {
      margin-right: 10px;
    }

    .size {
      padding-right: 5px;
    }

    .betweenBox,
    .datetimeBox {
      display: inline-block;
    }
  }

  i.el-icon-delete {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translate(0, -50%);
    cursor: pointer;

    &:hover {
      color: rgb(247, 86, 94);
    }
  }

  .andOrNotBox,
  .lineBox {
    position: absolute;
    top: 50%;
  }

  /* 且或非 */
  .andOrNotBox {
    width: 26px;
    height: 26px;
    font-size: 12px;
    text-align: center;
    line-height: 26px;
    border: 1px solid #cccccc;
    background-color: #fafafa;
    border-radius: 3px;
    cursor: pointer;
    z-index: 10;
    transform: translate(46px, -50%);
  }

  .lineBox {
    width: 26px;
    border: 1px solid #cccccc;
    border-right: none;
    transform: translate(60px, -50%);
    z-index: 5;
  }

  /* 设置筛选条件 */
  .settingCondition {
    padding: 10px 10px 0 10px;
    position: absolute;
    top: 2px;
    left: 280px;
  }

  .select {
    margin-left: 20px;
  }
  .elinput {
    margin-left: 20px;
  }
  .item {
    margin-left: 120px;
    line-height: 30px;
  }

  .content {
    margin-left: 20px;
    display: flex;
    align-items: center;
    p {
      margin-right: 15px;
    }
  }
}
</style>
